<template>
  <view class="p-btns">
    <custom-btn class="p-btn" :style="item.style" @click="item.handleFn" v-for="(item, index) in btns" :key="index">
      <template #icon v-if="item.id == 1">
        <uni-icons type="heart-filled" size="24" color="#ff5c55" v-if="info?.collect"></uni-icons>
        <uni-icons type="heart" size="24" color="#ff5c55" v-else></uni-icons>
      </template>
      <text v-if="item.label">{{item.label }}</text>
      <text v-else>{{info?.collect == 1 ? '已收藏' : '收藏'}}</text>
    </custom-btn>
  </view>
</template>

<script setup>
// 引入api
import { getItem } from "@/utils/storage";
import useStore from "@/store";
const { common, person, app } = useStore();
const refreshCollect = inject("refreshCollect", () => {});
const props = defineProps({
  info: {
    type: Object,
    default: () => ({}),
  },
  btnItems: {
    type: Array,
    default: () => [1, 3],
  },
});

const likeStyle = computed(() => {
  const { collect } = props.info || {};
  if (collect) {
    return {
      color: "#ff5c55",
      background: "rgba(255,92,85,0.1)",
    };
  } else {
    return {
      color: "#ff5c55",
    };
  }
});
const mobileStyle = shallowReactive({
  color: "#fff",
  background: "#ff5c55",
});

const collectLoading = ref(false);
const lookLoading = ref(false);

const btnsConf = reactive([
  {
    id: 1,
    label: "",
    handleFn: () => {
      handleFavor();
    },
    style: likeStyle,
  },
  {
    id: 2,
    label: "查看详情",
    handleFn: () => {
      toDetail();
    },
    style: {
      color: "#ff5c55",
      background: "rgba(255,92,85,0.1)",
    },
  },
  {
    id: 3,
    label: "查看电话",
    handleFn: () => {
      showPhone();
    },
    style: mobileStyle,
  },
]);

const btns = computed(() => {
  return btnsConf.filter((v) => props.btnItems.includes(v.id));
});

// 判定是否为新用户
const isNewCustomerFn = () => {
  const { appLogin, phone } = getItem("user_info") || {};
  if (!appLogin) {
    uni.navigateTo({ url: "/subPages/register/index" });
    return true;
  }
  if (!phone) {
    uni.navigateTo({ url: "/subPages/register/contact" });
    return true;
  }
  return false;
};

// 判定是否暂停相亲
const isPauseFn = () => {
  const { status } = getItem("user_info") || {};
  return status && status == 1;
};

// 收藏
const handleFavor = () => {
  if (isNewCustomerFn()) return;

  if (collectLoading.value) return;
  const { id: s_user_id, collect, look } = props.info;
  console.log("props.info", props.info);
  console.log("look", look);
  collectLoading.value = true;

  person
    .updateCollect({ s_user_id, collect })
    .then((res) => {
      if (collect) {
        props.info.collect = 0;
        // 我的收藏页面 - 移除当前项
        refreshCollect(s_user_id, "collect");
      } else {
        props.info.collect = 1;
      }
      person.updatePersonId({
        user_id: s_user_id,
        collect: props.info.collect,
        look: props.info.look,
      });

      uni.showToast({
        title: res,
        icon: "none",
      });
      collectLoading.value = false;
    })
    .catch((err) => {
      collectLoading.value = false;
    });
};

// 查看详情
const toDetail = () => {
  if (isNewCustomerFn()) return;
  const { id, collect, look } = props.info;
  person.updatePersonId({ user_id: id, collect, look });
  uni.navigateTo({ url: "/subPages/details/index" });
};

// 查看电话
const showPhone = () => {
  if (isNewCustomerFn()) return;

  if (isPauseFn()) {
    common.updateSubmitParams(true);
    common.updatePopupOpen(true, "submit");
    return;
  }

  person.updateFullPhone("");
  const { id, look } = props.info;
  if (look) {
    person.getPhone(id);
    hasPhone();
    return;
  }
  app.fetchAllnum().then((res) => {
    const { ci_num, member_num, allnum, advnum } = res;
    if (!allnum || allnum == 0) {
      uni.showToast({
        title: "今日解锁资料已达上限",
        icon: "none",
      });
      return;
    }
    if (ci_num || member_num) {
      hasPhone(res);
    } else {
      hasNoPhone(advnum);
    }
  });
};

// 有次数 or 已解锁 - 获取手机号
const hasPhone = (lookObj) => {
  const { id, year, surname, gender, edu, at_province, at_city, phone, look } = props.info;
  const gObj = {
    男: "儿子",
    女: "女儿",
  };
  String(year).slice(-2);
  const childInfo = [year + "年", gObj[gender], edu, `${at_province}${at_city}`].join("/");
  const data = {
    id,
    name: `${surname || ""}`,
    childInfo,
    phone,
    lookObj,
    look,
  };
  common.updateContactParams(data);
  setTimeout(() => {
    common.updatePopupOpen(true, "contact");
  }, 100);
};

// 无次数 - 未解锁
const hasNoPhone = (advnum) => {
  const data = { isNoNum: true, advnum };
  common.updatePromptParams(data);
  common.updatePopupOpen(true, "prompt");
};
</script>

<style lang=scss scoped>
.p-btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20rpx;
  .p-btn {
    width: 310rpx;
    height: 80rpx;
    font-size: 32rpx;
    font-weight: 600;
    border-radius: 120rpx;
    border: 2rpx solid #ff5c55;
    line-height: 80rpx;
  }
}
</style>
